<template>
	<view class="exhibitor-item u-border-bottom" @click="handleClick">
		<image :src="img" mode="aspectFill" class="exhibitor-logo"></image>
		<view class="exhibitor-info">
			<text class="name">{{name}}</text>
			<view class="summary">
				<view class="category">
					<image src="../../static/imgs/icon-cate.png" mode="scaleToFill"></image>
					<text class="label">分类：</text>
					<text>{{category}}</text>
				</view>
				<view class="booth">
					<image src="../../static/imgs/icon-booth.png" mode="scaleToFill"></image>
					<text class="label">展位：</text>
					<text v-if="booth.length > 0" v-for="(item, index) in booth" :key="item.booth_id" @click.stop="toMap(item.booth_no)">{{ index === (booth.length - 1) ? item.booth_no: item.booth_no + '、' }}</text>
					<text v-if="booth.length <= 0">暂无</text>
				</view>
				<!-- <view class="views">
					<image src="../../static/imgs/icon-views.png" mode="scaleToFill"></image>
					<text class="label">浏览：</text>
					<text>{{views}}</text>
				</view> -->
			</view>
			<text class="introduce u-line-2">{{introduce}}</text>
			<view class="summary">
				<view class="product-amount">
					<image src="../../static/imgs/icon-product.png" mode="scaleToFill"></image>
					<text>产品：</text>
					<text>{{product}}</text>
				</view>
				
				<view class="activity">
					<image src="../../static/imgs/icon-activity.png" mode="scaleToFill"></image>
					<text>活动：</text>
					<text>{{activity}}</text>
				</view>
			</view>
			<view class="imgs">
				<image v-for="item in productImgs" :src="item" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ExhibitorItem",
		props: {
			exhibitorId: {
				type: Number
			},
			
			img: {
				type: String
			},
			
			name: {
				type: String
			},
			
			// 展位列表集合
			booth: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			category: {
				type: String
			},
			
			views: {
				type: Number
			},
			
			introduce: {
				type: String
			},
			
			// 产品数量
			product: {
				type: Number
			},
			
			// 活动数量
			activity: {
				type: Number
			},
			
			// 产品图片列表
			productImgs: {
				type: Array
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleClick() {
				uni.navigateTo({
					url: `/pages/exhibitor-detail/exhibitor-detail?exhibitorId=${this.exhibitorId}`
				})
			},
			
			toMap(boothNo) {
				console.log('toMap: ', boothNo)
				this.$store.commit('SET_BOOTH_INFO', {
					boothNo: boothNo,
					storeId: this.exhibitorId
				})
				uni.switchTab({
					url: `/pages/booth/booth`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.exhibitor-item{
	box-sizing: border-box;
	padding-top: 40rpx;
	padding-bottom: 25rpx;
	padding-left: 10rpx;
	padding-right: 16rpx;
	display: flex;
	.exhibitor-logo{
		margin-right: 20rpx;
		flex-shrink: 0;
		width: 170rpx;
		height: 170rpx;
		border-radius: 5px;
		box-shadow: 2px 2px 5px 0 rgba($color: #000000, $alpha: .4);
		background-color: #fff;
	}
	
	.exhibitor-info{
		.name{
			font-size: 18px;
			font-weight: bold;
			color: #303133;
		}
		
		.summary{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			&>view{
				margin-top: 10rpx;
				margin-right: 30rpx;
			}
			
			.booth{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				image{
					margin-right: 2rpx;
					width: 26rpx;
					height: 26rpx;
				}
				text{
					color: #EA5C3D;
					font-size: 12px;
					
					&.label{
						color: #A2A2A2;
					}
				}
			}
			
			.category{
				display: flex;
				align-items: center;
				image{
					margin-right: 2rpx;
					width: 26rpx;
					height: 26rpx;
				}
				text{
					color: #EA5C3D;
					font-size: 12px;
					
					&.label{
						color: #A2A2A2;
					}
				}
			}
			
			.views{
				display: flex;
				align-items: center;
				image{
					margin-right: 2rpx;
					width: 30rpx;
					height: 30rpx;
				}
				text{
					color: #EA5C3D;
					font-size: 12px;
					
					&.label{
						color: #A2A2A2;
					}
				}
			}
			
			.product-amount{
				display: flex;
				align-items: center;
				image{
					margin-right: 2rpx;
					width: 30rpx;
					height: 30rpx;
				}
				text{
					color: #A2A2A2;
					font-size: 12px;
				}
			}
			
			.activity{
				display: flex;
				align-items: center;
				image{
					margin-right: 2rpx;
					width: 30rpx;
					height: 30rpx;
				}
				text{
					color: #A2A2A2;
					font-size: 12px;
				}
			}
			
		}
		
		.introduce{
			margin-top: 10rpx;
			font-size: 12px;
			color: #666;
		}
		
		.imgs{
			margin-top: 20rpx;
			display: flex;
			image{
				margin-right: 20rpx;
				width: 150rpx;
				height: 150rpx;
			}
		}
	}
}
</style>
